<template>
	<view class="main-container">
		<!-- 详情 -->
		<uni-list class="top">
			<uni-list-item title="基本信息:" :note="handleNote(0)" :showArrow='false'></uni-list-item>
		</uni-list>
		<view class="scroll-view">
			<!-- 组件要求 -->
			<uni-list>
				<uni-list-item title="组件要求" :note="handleNote(1)" :showArrow='false'></uni-list-item>
			</uni-list>
			<!-- 特殊要求 -->
			<uni-list>
				<uni-list-item title="特殊要求" :note="handleNote(2)" :showArrow='false'></uni-list-item>
			</uni-list>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableDatas: {
					dicID: 24396,
					datas: [],
					columns: [],
					formData: {},
					loading: false,
				},
				query: {}
			}
		},
		onLoad(e) {
			this.query = e
			this.getApsData()
		},
		computed: {
			normalDemand() {
				return this.tableDatas.datas.filter(val => val.Status && val.DataTtype === '组件要求')
			},
			specialDemand() {
				return this.tableDatas.datas.filter(val => val.Status && val.DataTtype === '特殊要求')
			},
		},
		methods: {
			// 获取数据
			async getApsData(remark = 0) {
				const condition = {
					dicID: this.tableDatas.dicID,
				}
				// Object.assign(condition, this.tableDatas.formData)
				condition.SalesOrderDetailID = this.query.SalesOrderDetailID
				this.tableDatas.loading = true
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				this.tableDatas.loading = false
				if (!res) return
				const {
					result,
					msg,
					data,
					Columns
				} = res
				if (!result) return uni.showToast({
					title: msg,
					icon: 'error'
				})
				this.$set(this.tableDatas, 'datas', data)
				this.$set(this.tableDatas, 'columns', Columns[0])
			},
			handleNote(index) {
				if (index === 0) {
					const query = this.query
					return `下单日期：${query.OrderDate}
					PO单号：${query.SalesOrderNo}
					机台名称：${query.Extend3}
					订单数量：${query.Qty}
					订单交期：${query.DeliveryDate}
					业务员：${query.SalesMan}`
				}
				if (index === 1) {
					const normalDemand = this.normalDemand
					let allStr = ''
					normalDemand.forEach((row, rowIndex) => {
						let rowStr = `${rowIndex+1}.${row.DataName}:
						【配置要求】${row.Disposition||'无'}
						【其他要求】${row.OtherRequirements||'无'}
						
						`
						allStr += rowStr
					})
					return allStr
				} else if (index === 2) {
					const specialDemand = this.specialDemand
					let allStr = ''
					specialDemand.forEach((row, rowIndex) => {
						let rowStr = `${rowIndex+1}.${row.DataName}:
						【配置要求】${row.Disposition||'无'}
						【其他要求】${row.OtherRequirements||'无'}
						
						`
						allStr += rowStr
					})
					return allStr
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-list-item__content-title {
		background: linear-gradient(to right, rgb(184, 230, 236), #fff) !important;
		font-size: 36rpx;
		font-weight: bold;
	}

	::v-deep .uni-list-item__content-note {
		font-size: 30rpx;
	}

	.main-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		overflow: hidden;

		.top {
			border-bottom: 1px solid $uni-border-color;
			box-shadow: 0 4rpx 6rpx -1rpx rgba(0, 0, 0, 0.2);
			margin-bottom:4rpx;
			::v-deep .uni-list-item__content-note {
				color: $uni-color-primary;
			}
			position: sticky;
		}

		.scroll-view {
			width: 100%;
			flex-grow: 1;
			overflow-y: auto;
		}
	}
</style>